<template>
  <div class="left_box"   v-dialogDrag>
        <!-- <section class="left"> -->
            <div class="left_header flex">
                <div class="header_item " :class="item.checked?'activeMenu':''" @click="changeMenu(i)" v-for="(item,i) of headerList" :key="i">
                    <img :src="item.icon" alt="">
                    <div  class="header_label">{{item.label}}</div>
                </div>
                <img @click="closedialog" src="https://ejarwebtools.oss-cn-hangzhou.aliyuncs.com/image/2_close.png" class="close_tk" alt="">
            </div>
            <div style="padding-left:15px;" v-if="headerList[0].checked">
                 <el-collapse v-model="activeNames" @change="handleChange" accordion>
                        <el-collapse-item title="常用" name="1">
                                      <ComponentList :ClassificationType="'CommonlyUsed'" />
                        </el-collapse-item>
                         <el-collapse-item title="基础" name="2">
                                      <ComponentList :ClassificationType="'Basics'" />
                        </el-collapse-item>
                         <el-collapse-item title="移动端" name="3">
                                      <ComponentList :ClassificationType="'mobile'" />
                        </el-collapse-item>
                          <el-collapse-item title="自定义" name="4">
                                      <ComponentList :ClassificationType="'custom'" />
                        </el-collapse-item>
                  
                 </el-collapse>
            </div>
              <div style="padding:0 15px 15px;" v-if="headerList[1].checked">
                 <el-tabs v-model="activeName" >
                    <el-tab-pane label="主题" name="1">
                        <div class="flex-wrap">
                            <div class="zt_color_item" @click="changeZhuti(item)" :style="{background:item.color}" v-for="(item,i) of colorList" :key="i"></div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="基础" name="2">

                    </el-tab-pane>
                </el-tabs>
             </div>

       
        <!-- </section> -->
  </div>
</template>

<script>
import ComponentList from '@/components/ComponentList' // 左侧列表组件
import {colorList} from '@/utils/colorList.js'

export default {
 components:{
    ComponentList
 },
 data() {
    return {
           activeNames: ['1'],
           activeName:'1',
           colorList:colorList,
           headerList:[
            {icon:'https://ejarwebtools.oss-cn-hangzhou.aliyuncs.com/image/2_menu_white.png',label:'模块',checked:true},
            {icon:'https://ejarwebtools.oss-cn-hangzhou.aliyuncs.com/image/2_主题.png',label:'样式',checked:false},
           ],
    }
 },
  methods: {
    closedialog(){
        this.$emit("closeTK")
    },
    changeMenu(i){
        for(let item of this.headerList){
             item.checked=false
        }
        this.headerList[i].checked=true
    },
      handleChange(val) {
        console.log(val);
      },
      changeZhuti(item){
        this.$confirm('您的网站设计已经更改，请确认已保存模板，是否立即生效?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            localStorage.setItem('themeColor',item.color)
            setTimeout(() => {
                location.reload()
            }, 100);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消配置'
          });          
        });
        
      },
    }
}
</script>

<style scoped lang="scss">
.left_box{
    background: #fff;
    width: 350px;
    position: fixed;
    z-index: 2001;
    top: 20%;
    left: 150px;
    overflow: hidden;
    border-radius: 10px;
    .left_header{
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 58px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        background: #5a75d5;
    }
    .header_item{
        width:60px;
        padding: 5px;
        cursor: pointer;
        img{
            width: 30px;
        }
        .header_label{
            text-align: center;
            margin: auto;
            margin-top: -5px;
        }
    }
    
}
.header_item:hover{
        background:#778dda;
    }
.close_tk{
    width: 24px;
    height: 24px;
    position: absolute;
    right:10px;
    cursor: pointer;
    top:15px;
}
.activeMenu{
        background:#778dda;
}
.zt_color_item{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 7px;
    border: 1px solid #eee;
    transition: .2s;
    cursor: pointer;
    animation: wave .75s;
    z-index: 1;
}
.zt_color_item:hover{
    transform: rotate(45deg);border-radius: 5px;
}
</style>